<template>
  <view
    :style="{
      paddingTop: SystemInfo.statusBarHeight + 'px',
      background: '#f7f7f7',
    }"
  >
    <u-sticky :offset-top="navHeight" :h5-nav-height="h5NavHeight">
      <view
        :style="{
          width: maxWidth + 'px',
        }"
      >
        <u-tabs
          :list="tabList"
          :is-scroll="false"
          :current="activeIndex"
          name="value"
          @change="changeTabItem"
        ></u-tabs>
      </view>
    </u-sticky>

    <view class="index_warp">
      <study-card
        type="course"
        v-for="item in showList"
        :key="item.id"
        :item="item"
      />
      <load-more :status="status" />
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import { userinfoCourseList, userinfoCollect } from "@/api/course";
import list from "@/config/list";
export default {
  name: "my-study",
  props: {
    h5NavHeight: {
      type: Number,
      default: 0,
    },
    offsetTop: {
      type: [Number, String],
      default: 0,
    },
    isCourse: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      status: "loadmore",
      tabList: list.userCourseTabs,
      activeIndex: 0,
      pageNum: [1, 1, 1],
      pageSize: 20,
      list: [],
    };
  },
  created() {
    const obj = {
      list: [],
      total: 0,
    };
    this.tabList.forEach((v, i) => {
      this.list[i] = obj;
    });
    this.getList();
    this.toRpx = 750 / this.SystemInfo.windowWidth;
  },
  onReachBottom() {
    this.$u.throttle(this.getList(), 1000, true);
  },
  methods: {
    getList() {
      if (this.status == "nomore") return;
      const activeIndex = this.activeIndex;
      if (
        (this.pageSize * (this.pageNum[activeIndex] - 1) >
          this.list[activeIndex] &&
          this.list[activeIndex].total) ||
        0
      ) {
        this.status = "nomore";
      }
      this.status = "loading";
      this.getCurrentList({
        pageNum: this.pageNum[this.activeIndex],
        pageSize: this.pageSize,
        playType: this.playType,
      }).then((res) => {
        this.pageNum[activeIndex] = this.pageNum[activeIndex] + 1;
        let obj = {};
        obj.list = [
          ...((this.list[activeIndex] && this.list[activeIndex].list) || []),
          ...res.list,
        ];
        obj.total = res.total;
        this.showList = obj;
        if (res.list.length < this.pageSize) {
          this.status = "nomore";
        }
      });
    },
    changeTabItem(e) {
      this.activeIndex = e;
      this.status = "loadmore";
      this.getList();
    },
  },
  computed: {
    ...mapState("equipment", ["SystemInfo"]),
    showList: {
      get() {
        return this.list[this.activeIndex].list;
      },
      set(obj) {
        this.$set(this.list, this.activeIndex, obj);
      },
    },
    getCurrentList() {
      return this.isCourse ? userinfoCourseList : userinfoCollect;
    },
    playType: function () {
      return this.activeIndex + 1;
    },
    maxWidth() {
      return this.$store.getters.maxWidth;
    },
    navHeight() {
      // #ifdef H5
      return this.$store.getters.navHeight;
      // #endif
      // #ifndef H5
      return this.$store.getters.navHeight * this.toRpx;
      // #endif
    },
  },
};
</script>

<style scoped>
.index_warp {
  padding: 30upx 30upx 0;
}
</style>
